<script setup lang="ts">
import * as echarts from 'echarts';
import {onMounted, ref} from "vue";
import geoJson from '../../assets/map/china.js'
import myAxios from "../../plugins/myAxios.ts";
import {Message} from "@arco-design/web-vue";
import {useRouter} from "vue-router";

const mapChart = ref(null);
const router = useRouter()
const mapName = 'china';
const dataSource = ref();
const paginationProps = ref();
const showICM = ref(false);
// 基于准备好的dom，初始化echarts实例
let myChart;

echarts.registerMap(mapName, geoJson)
const initMapChart = () => {
  myChart = echarts.init(mapChart.value);
  // 绘制图表
  const option = {
    title: {
      text: '中药地图分布'
    },
    geo: {
      // 使用 registerMap 注册的地图名称。
      map: "china",
      roam: true,
      label: {
        show: true,
        color: "#666666",
      },
      itemStyle: {
        // 地图区域的颜色
        areaColor: "#8AE783", // 绿色
        // 图形的描边颜色
        borderColor: "#2979ff", // 蓝色
      },
      emphasis: {
        // 设置区域样式
        itemStyle: {
          areaColor: "#ffff99", // 黄色
          borderColor: "#f29100", // 描边颜色黄色
        },
        // 设置字体
        label: {
          fontSize: 16, // 16px
          color: "#f29100", // 黄色
        }
      },
    }
  }
  myChart.setOption(option)
  window.addEventListener('resize', function () {
    myChart.resize();
  });
  myChart.on('click', function (params) {
    myAxios.get(`/medicine/province/${params.name}`).then(res => {
      dataSource.value = res.data;
      console.log(dataSource.value)
      showICM.value = true;
    }).catch(err => {
      console.log(err)
    });
  });
}
const toDetailTCM = (id) => {
  router.push({
    path: `/${id}`,
    params: {
      id: id
    }
  })
}

onMounted(() => {
  initMapChart()
})
</script>

<template>
  <div id="distributionView">
    <div ref="mapChart" id="mapChart" class="map">
    </div>
    <div class="showICM" :style="{ display: showICM ? 'block' : 'none' }">
      <div style="color: black;font-weight: 700;">该地分布药材</div>
      <div class="close" @click="showICM=false">
        <icon-close-circle style="font-size: 24;"/>
      </div>
      <a-list
          class="list-action-layout"
          :data="dataSource"
          :pagination-props="paginationProps"
          :virtualListProps="{
            height: 560,
          }"
      >
        <template #item="{ item }">
          <a-list-item class="list-item" action-layout="vertical"
                       @click="toDetailTCM(item.id)">
            <template #actions>
            </template>
            <template #extra>
              <div class="image-area">
                <a-image alt="arco-design" :src="'src/assets/images/image/' + item.imageAddress.split('\\')[1]"/>
              </div>
            </template>
            <a-list-item-meta
                :title="'学名: ' + item.name"
                :description="'效用: ' + item.effect"
            >
            </a-list-item-meta>
          </a-list-item>
        </template>
      </a-list>
    </div>
  </div>
</template>

<style scoped>
#distributionView {
  display: grid;
  padding-top: 20px;
  width: 100vw;
  height: 100vh;
}

:deep(.arco-scrollbar) {
  border-radius: 20px;
  background-color: #fff;
}

.showICM {
  margin-left: 5%;
  width: 60%;
  height: 75%;
  background-color: #eee;
  position: absolute;
  top: 8rem;
  left: 18rem;
  border-radius: 20px;
}

.close {
  position: relative;
  color: black;
  width: 24px;
  right: -8px;
  top: -54px;
  cursor: pointer;
}

.showICM > div:nth-child(1) {
  color: white;
  height: 4rem;
  text-align: center;
  transform: translateY(1rem);
}

.list-action-layout {
  width: 90%;
  height: 80%;
  margin: 0 auto;
}

.list-action-layout .image-area {
  width: 183px;
  height: 119px;
  border-radius: 2px;
  overflow: hidden;
}

.list-action-layout .list-item {
  padding: 20px 0;
  border-bottom: 1px solid var(--color-fill-3);
}
.list-action-layout .list-item:hover {
  background-color: #ddd;
  cursor: pointer;
}

.list-action-layout .image-area img {
  width: 100%;
}

.list-action-layout .arco-list-item-action .arco-icon {
  margin: 0 4px;
}
</style>
